<template>
  <div>
    <component-head></component-head>
      <div class="content">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item 
          v-for="item in banners"
          :key="item.id">
            <img :src="item.picUrl" alt="BannerPicture">
        </van-swipe-item>
      </van-swipe>
      <ul>
        <li>网易自营品牌</li>
        <li>30天无忧退货</li>
        <li>48小时快速退款</li>
      </ul>
      <!-- 宫格 -->
        <van-grid :column-num="5">
          <van-grid-item 
            v-for="itemcate in cate"
            :key="itemcate.id"
            :icon="itemcate.icon"
            :text="itemcate.name"
            @click="enteritemlist(itemcate.id)"
            />
        </van-grid>
        <!-- 列表页 -->
        <rocommod
          @click="enterDetail"
          @add_car="addCar"
          :items='fetchitems'
        ></rocommod>
        <!-- 详情页 -->
        </van-pull-refresh>
      </div>
    <mybarba></mybarba>
  </div>
</template>

<script>
// 引入组件mybarba、componenthead...
import mybarba from '@/components/mybarba'
import ComponentHead from '@/views/home/components/ComponentHead'
import { fetchbanner, fetchcate, fetchitems } from '@/api/request'
import rocommod from '@/views/home/components/recommod'
import { mapState, mapMutations } from 'vuex'
import { Toast } from 'vant'
export default {
  data () {
    return {
      banners: [],
      cate: [],
      recommodId: 173963,
      fetchitems: [],
      isLoading: false
    }
  },
  computed: {
    ...mapState({
      item: (state) => state.cardata.items
    })
  },
  created () {
    this.fetchBanner()
    this.fetchCate()
    this.fetchItem()
  },
  methods: {
    // 刷新页面
    onRefresh () {
        setTimeout(() => {
          this.fetchCate()
          this.fetchItem()
          Toast('刷新成功')
          this.isLoading = false
      }, 1000);
    },
    
    // 添加购物车
    addCar (item) {
      item.num = 1;
      item.isChecked = true
      this.setAddCar(item)
    },
    // 进物品列表页
    enteritemlist (id) {
      this.$router.push(`/itemlist/${id}`)
      console.log('id=' + id);
    },
    // 进详情页
    enterDetail (id) {
      this.$router.push(`/detail/${id}`)
      console.log(id)
    },
    // 获取轮播数据
    fetchBanner () {
      fetchbanner().then(res => {
        if(res.data.code == 0 ) {
          this.banners = res.data.data
        }
      })
    },
    // 获取分类数据
    fetchCate () {
      fetchcate ().then(res => {
        if(res.data.code == 0){
          this.cate = res.data.data
        }
      })
    },
    // 获取分类下的列表数据
    fetchItem () {
      fetchitems ({
        categoryId: this.recommodId
      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          this.fetchitems = res.data.data
        }
      })
    },
    ...mapMutations('cardata', ['setAddCar'])
  },
  components: {
    mybarba,
    ComponentHead,
    rocommod
  }
}
</script>

<style lang="scss" scoped>
  .content{
    margin: 47.72px 0 50px 0;
  .my-swipe img{
      width: 100%;
      height: 100%;
    }
    ul{
      display: flex;
      font-size: 12px;
      justify-content: space-around;
    }
  }
</style>
